<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="top">
					<image :src="data.dapp.option.step.ranking_pic?data.dapp.option.step.ranking_pic:data.bg"></image>
				</view>
				<view class="rank">
					<view @click="change" id="1">好友排行</view>
					<view @click="change" id="2">全国排行</view>
				</view>
				<view class="triangle-left" v-if="data.friend"></view>
				<view class="triangle-right" v-if="data.country"></view>
				<view class="my">
					<view class="avatar">
						<image :src="data.avatar"></image>
					</view>
					<view class="my-info">
						<view class="my-name">{{data.name}}</view>
						<view v-if="data.money!=0">第{{data.noun}}名</view>
						<view v-if="data.money==0">暂未上榜</view>
					</view>
					<view class="moeny">
						<view class="number">{{data.money}}</view>
						<view>{{data.dapp.option.step.currency_name?data.dapp.option.step.currency_name:'活力币'}}数</view>
					</view>
				</view>
				<view class="list">
					<view class="list-item" v-for="(info,index) in data.list" :key="index">
						<view class="noun">
							<view class="noun-text" v-if="data.info.noun">{{data.info.noun}}</view>
							<image :src="data.info.img" v-if="data.info.img"></image>
						</view>
						<view class="avatar">
							<image :src="data.info.user.avatar_url"></image>
						</view>
						<view class="info">
							<view class="name">{{data.info.user.nickname}}</view>
						</view>
						<view class="moeny">
							<view class="number">{{data.info.step_currency}}</view>
							<view>{{data.dapp.option.step.currency_name?dapp.option.step.currency_name:'活力币'}}数</view>
						</view>
					</view>
				</view>
				<view class="loading" v-if="data.loading">正在加载中...</view>
				<view class="temp" v-if="data.ad">
					<ad @error="adError" :unitId="data.unit_id" v-if="data.unit_id"></ad>
				</view>
				<view class="ad">
					<ad @error="adError" :unitId="data.unit_id" v-if="data.unit_id"></ad>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					friend: !0,
					country: !1,
					avatar: "",
					name: "",
					noun: "",
					bg: "../../static/step/topBG.png",
					id: 1,
					page: 2,
					money: "",
					loading: !1,
					unit_id: "",
					list: [],
					over: !1,
					ad: !1
				},
			};
		},
		onLoad: function(a) {myVue = this;
			myVue.getApp.page.onLoad(this, a);
			var t = this;
			this.data.list;
			t.getApp.core.showLoading({
				title: "数据加载中...",
				mask: !0
			}), t.getApp.request({
				url: t.getApp.api.step.ranking,
				data: {
					status: 1,
					page: 1
				},
				success: function(a) {
					t.getApp.core.hideLoading();
					var e = a.data.user,
						i = a.data.list,
						n = a.data.ad_data;
					if (i.length > 3) {
						for (var g = 3; g < i.length; g++) i[g].noun = g + 1;
						i[0].img = "../../static/step/top1.png", i[1].img = "../../static/step/top2.png", i[2].img = "../../static/step/top3.png";
					} else i.length > 0 && i.length <= 3 && (i[0].img = "../../static/step/top1.png", i.length > 1 && (i[1].img =
							"../../static/step/top2.png"),
						i.length > 2 && (i[2].img = "../../static/step/top3.png"));
					var o = !1,
						p = !1;
					null !== a.data.ad_data && (o = a.data.ad_data.unit_id, p = !0), t.setData({
						list: i,
						name: e.user.nickname,
						avatar: e.user.avatar_url,
						noun: e.raking,
						money: e.step_currency,
						unit_id: o,
						ad_data: n,
						ad: p
					});
				}
			});
		},
		onReachBottom: function() {
			var a = this,
				t = a.data.over;
			if (!t) {
				var e = this.data.id,
					i = this.data.list,
					n = this.data.page;
				this.setData({
					loading: !0
				}), a.getApp.request({
					url: a.getApp.api.step.ranking,
					data: {
						status: e,
						page: n
					},
					success: function(g) {
						var o = g.data.list;
						i = i.concat(o), this.data.loading = !1;
						for (var p = 10 * (n - 1); p < i.length; p++) i[p].noun = p + 1;
						o.length < 10 && (t = !0), a.setData({
							list: i,
							id: e,
							page: n + 1,
							loading: !1,
							over: t
						});
					}
				});
			}
		},
		methods: {
			adError: function(a) {
				console.log(a.detail);
			},
			change: function(a) {
				myVue.getApp.core.showLoading({
					title: "数据加载中...",
					mask: !0
				});
				var t = a.target.id,
					e = void 0,
					i = void 0,
					n = this;
				this.data.list;
				1 == t ? (e = !0, i = !1) : 2 == t && (e = !1, i = !0), n.getApp.request({
					url: n.getApp.api.step.ranking,
					data: {
						status: t
					},
					success: function(a) {
						n.getApp.core.hideLoading();
						var g = a.data.user,
							o = a.data.list;
						if (o.length > 3) {
							for (var p = 3; p < o.length; p++) o[p].noun = p + 1;
							o[0].img = "../../static/step/top1.png", o[1].img = "../../static/step/top2.png", o[2].img = "../../static/step/top3.png";
						} else o.length > 0 && o.length <= 3 && (o[0].img = "../../static/step/top1.png", o.length > 1 && (o[1].img =
								"../../static/step/top2.png"),
							o.length > 2 && (o[2].img = "../../static/step/top3.png"));
						n.setData({
							list: o,
							id: t,
							name: g.user.nickname,
							avatar: g.user.avatar_url,
							noun: g.raking,
							money: g.step_currency,
							friend: e,
							page: 2,
							over: !1,
							country: i
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.top { 
		width: 100%; 
		height: 400upx; 
	} 
 
	.top image { 
		width: 100%; 
		height: 400upx; 
		z-index: 2; 
	} 
 
	.triangle-left { 
		width: 0; 
		height: 0; 
		border-left: 14upx solid transparent; 
		border-right: 14upx solid transparent; 
		border-bottom: 18upx solid white; 
		position: absolute; 
		left: 22.5%; 
		top: 384upx; 
		z-index: 10; 
	} 
 
	.triangle-right { 
		width: 0; 
		height: 0; 
		border-left: 14upx solid transparent; 
		border-right: 14upx solid transparent; 
		border-bottom: 18upx solid white; 
		position: absolute; 
		right: 22.5%; 
		top: 384upx; 
		z-index: 10; 
	} 
 
	.rank { 
		width: 100%; 
		position: absolute; 
		top: 300upx; 
		background-color: rgba(0, 0, 0, 0.1); 
		color: white; 
		font-size: 12pt; 
		z-index: 5; 
	} 
 
	.rank view { 
		display: inline-block; 
		width: 50%; 
		height: 100%; 
		line-height: 100upx; 
		text-align: center; 
	} 
 
	.my { 
		height: 136upx; 
		width: 100%; 
		background-color: white; 
		margin-bottom: 20upx; 
	} 
 
	.avatar { 
		padding: 24upx; 
		float: left; 
	} 
 
	.avatar image { 
		height: 80upx; 
		width: 80upx; 
		border: 4upx #f09b48 solid; 
		border-radius: 40upx; 
	} 
 
	.my-info { 
		color: #999; 
		font-size: 9pt; 
		padding: 32upx 0; 
		height: 100%; 
		float: left; 
	} 
 
	.my-name { 
		color: #353535; 
		font-size: 11pt; 
		margin-bottom: 8upx; 
	} 
 
	.moeny { 
		float: right; 
		color: #999; 
		font-size: 9pt; 
		padding: 32upx 24upx; 
		height: 100%; 
		text-align: right; 
	} 
 
	.number { 
		font-size: 13pt; 
		font-family: 'DIN'; 
		color: #353535; 
		margin-bottom: 10upx; 
	} 
 
	.temp { 
		visibility: hidden; 
	} 
 
	.list-item { 
		height: 135upx; 
		width: 100%; 
		background-color: white; 
		border-bottom: 1upx solid #e2e2e2; 
		overflow: hidden; 
	} 
 
	.noun { 
		width: 100upx; 
		height: 135upx; 
		float: left; 
		text-align: center; 
		padding: 43upx 25upx; 
	} 
 
	.noun image { 
		width: 50upx; 
		height: 50upx; 
	} 
 
	.noun-text { 
		font-size: 11pt; 
		color: #353535; 
	} 
 
	.list .avatar { 
		padding-left: 0upx; 
	} 
 
	.info { 
		float: left; 
		color: #353535; 
		font-size: 11pt; 
		line-height: 136upx; 
		width: 45%; 
		overflow: hidden; 
	} 
 
	.name { 
		overflow: hidden; 
		white-space: nowrap; 
		text-overflow: ellipsis; 
	} 
 
	.loading { 
		font-size: 9pt; 
		color: #353535; 
		text-align: center; 
		height: 80upx; 
		line-height: 80upx; 
		background-color: white; 
	} 
 
	.ad { 
		width: 100%; 
		position: fixed; 
		bottom: 0; 
	} 
</style>
